<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<%
    String contextPath = request.getContextPath();
    String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + contextPath;

    String csspath=path+"/assets/css/";
    String imagepath=path+"/assets/image/";
    String serverpath=relative.getFile();
    String birthday=${relative.birthday};
    String deathday=${relative.deathday};
    String controllerPath="/admin/user/";

%>

<html>
<head>
    <title>${relative.getName()}的永久主页</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="${csspath}main.css"/>
</head>
<body>

<!-- Wrapper -->
<div id="wrapper">

    <!-- Nav-->
    <nav id="nav">
        <ul>
            <li><a href="#header">首页</a></li>
            <li><a href="#intro">简介</a></li>
            <li><a href="#event">事迹</a></li>         
            <li><a href="#family">家人</a></li>
            <li><a href="#video">影像</a></li>
            <li><a href="#comment">留言</a></li>
            <!--a class="button special small" style="float: right;" href="/admin/relative/relative_edit">编辑</a-->
        </ul>
    </nav>


    <!-- Header 显示遗像+生卒年-->
    <header id="header" class="alt">
        <h1>${relative.getName()}</h1>
        <h1>${relative.getBirthdayOfString()}-${relative.deathdayOfString()}</h1>
        <span class="logo">
            <!-- img src="${relative.file}/image/photo.jpg" alt=""/ -->
			<img src="${serverpath}/image/photo.jpg" alt=""/>
		</span>
        <p></p>
    </header>

    <!--主要内容-->
    <div id="main">

        <!--简介-->
        <section id="introduction" class="main">
            <section id="intro-left">

                <!--显示亲人信息 -->
                <div id="div_intro_main">
                    <header class="major">
                        <h2>简介</h2>
                        <div class="div-show-hover">
                            <button class="button small" onclick="intro_edit();">编辑</button>       
                        </div>
                    </header>

                    <div class="spotlight">
                        <div class="content">
                            <p>${relative.information}</p>
                        </div>
                        <span class="image"><img src="<%=serverpath%>/image/photo.jpg" alt=""/></span>
                    </div>
                    <dl class="alt">
                        <dt>姓名：</dt>
                        <dd>${relative.job}</dd>
                        <dt>职业：</dt>
                        <dd>${relative.province}</dd>
                        <dt>民族：</dt>
                        <dd>${relative.nation}</dd>
                        <dt>籍贯：</dt>
                        <dd>${relative.getBirthPlace()}</dd>
                        <dt>诞辰：</dt>
                        <dd>${relative.getBirthdayOfString()}</dd>
                        <div id="intro_isalive">
                            <dt>逝世：</dt>
                            <dd>${relative.getDeathdayOfString()}</dd>
                            <dt>葬于：</dt>
                            <dd>${relative.getBuryPlace()}</dd>
                        </div>
                    </dl>
                </div>

                <!--编辑亲人信息-->
                <div id="div_intro_edit" style="display: none;">
                    <form id="form_intro_edit" action="${controllerPath}introduction">
                        <div class="8u 12$u(medium)">
                            <div style="margin-bottom: 10px;">
                                <textarea >${relative.information}</textarea>  
                            </div>
                            
                            <div class="row uniform">
                                <div class="6u 12u$(medium)">       
                                    <dl class="alt">
                                        <dt>姓:</dt>
                                        <dd><input type="text" name="lastname">${relative.lastname}</dd>
                                        <dt>名:</dt>
                                        <dd><input type="text" name="firstname">${relative.firstname}</dd>
                                        <dt>职业：</dt>
                                        <dd><input type="text" name="job">${relative.job}</dd>
                                        <dt>民族：</dt>
                                        <dd><input type="text" name="nation">${relative.nation}</dd>
                                    </dl>
                                </div>
                                <div class="6u$ 12u$(medium)">       
                                    <dl class="alt">                                                   
                                        <dt>状态：</dt>
                                        <dd>
                                            <input type="radio" id="dead" name="cond_dead" onclick="deadinfo.style.display='';">
                                            <label for="dead">去世</label>
                                            <input type="radio" id="alive" name="cond_alive" checked onclick="deadinfo.style.display='none';">
                                            <label for="alive">健在</label>
                                        </dd>
                                        <dt>生于：</dt>
                                        <dd><input type="date" name="birthday"></dd>
                                        <div id="deadinfo" style="display: none;">
                                            <dt>卒于：</dt>
                                            <dd><input type="date" name="deaday" id="deadday"  ></dd>
                                            <dt>葬于：</dt>
                                            <dd><input type="text" name="buryaddress" id="buryaddress" ></dd>
                                        </div>
                                    </dl>
                                </div>
                                <div class="2u">
                                    <dt>籍贯：</dt>
                                </div>
                                <div class="5u">
                                    <dd>
                                        <select name="province" id="province">
                                            <option value="1">湖北省</option>
                                            <option value="2">湖南省</option>
                                            <option value="3">河北省</option>
                                            <option value="4">河南省</option>
                                        </select>
                                    </dd>
                                </div>
                                <div class="5u$">
                                    <dd>
                                        <select name="province" id="province">
                                            <option value="1">湖北省</option>
                                            <option value="2">湖南省</option>
                                            <option value="3">河北省</option>
                                            <option value="4">河南省</option>
                                        </select>
                                    </dd>
                                </div>
                            </div>                     
                        </div>
                        <div class="4u$ 12$u(medium)"">
                            <span class="image"><img src="${relative.images}/photo.jpg" alt=""/></span>
                            <div style="margin-left:30%;text-align:center;">
                                <div class="fileUpload"> 
                                        <input type="text" id="uploadFile" placeholder="点击这里选择图片" disabled="disabled" />
                                        <input type="file" id="uploadBtn" class="upload" />      
                                </div> 
                            </div> 
                        </div>
                        <div>
                            <input type="submit" class="button special small" onclick="intro_save();" value="保存">
                            <input type="cancel" class="button small" onclick="intro_cancel();" value="取消">
                        </div> 
                    </form>
                </div>

            </section>
        </section>


        <!--事迹（时间轴）-->
        <section id="event" class="main">
            <div class="spotlight">
                <div class="content">
                    <header class="major">
                        <h2>生平事迹</h2>
                        <div class="div-show-hover">
                            <button class="button small" onclick="event_edit();">编辑</button>       
                        </div>
                    </header>

                    <!-- 时间轴 -->
                    <section id="cd-timeline" class="cd-container">
                        <tbody>
                            <c:forEach var="event" items="${relative.events}" varStatus="status">
                                <div class="cd-timeline-block">
                                    <div class="cd-timeline-img">
                                        <img src="${imagepath}/image/circle.svg" alt="${status.index}" >
                                    </div>
                                    <div class="cd-timeline-content">
                                        <p>${event.eventInfo}</p>
                                        <span class="cd-date">${event.getEventDateOfString()}</span>        
                                    </div>
                                </div>
                            </c:forEach>
                        </tbody>
                    </section>

                    <div id="div_event_edit" style="display: none;">
                        <form id="form_event_edit" action="${controllerPath}event">
                        <dl class="alt">
                            <c:forEach var="event" items="${relative.events}" varStatus="status">
                                <dt><input type="date" id="date${status.index}" value="${event.date}"></dt>
                                <dd><input type="text" id="event${status.index}" value="${event.event}"></dd>
                            </c:forEach>
                            <dt><input type="date" id="date_extra" style="display: none" ></dt>
                            <dd><input type="text" id="event_extra" style="display: none"></dd>
                        </dl>                           
                            <button onclick="add_event();" class="button small special">添加</button>
                            <input type="submit" onclick="event_submit();" value="保存" class="button small special">
                            <input type="cancel" onclick="event_cancel();" value="取消" class="button small">      
                        </form>


                    </div>                   
                </div>
            </div>
        </section>


        

        <!--亲属关系-->
        <section id="relation" class="main">
            <section id="intro-left">
                <header class="major">
                    <h2>家人</h2>
                    <button class="button small" onclick="relation_edit();">编辑</button>      
                </header>
                <dl id="relation_main" class="alt">
                    <c:forEach var="rel" items="${relative.Relations}" varStatus="status">                           
                        <dt>${rel.relation}</dt>
                        <dd>${rel.name}</dd>             
                    </c:forEach>
                </dl>

                <div id="div_relation_edit" style="display: none;">
                <form id="form_relation_edit" action="${controllerPath}relation">
                    <dl class="alt">
                    <c:forEach var="rel" items="${relative.Relations}" varStatus="status">                           
                        <dt><input type="text"  id="rel_relation${status.index}" value="${rel.relation}"></dt>
                        <dd><input type="text"  id="rel_name${status.index}" value="${rel.name}"></dd>           
                    </c:forEach>
                    <dt><input id="rel_relation_extra" type="text"  style="display: none;" ></dt>
                    <dd><input id="rel_name_extra" type="text"  style="display: none;" ></dd>
                    </dl>
                            <button onclick="add_relation();" class="button small special">添加</button>
                            <input type="submit" onclick="relation_submit();" value="保存" class="button small special">
                            <input type="cancel" onclick="relation_cancel();" value="取消" class="button small">  
                    </form>



                </div>
            </section>
        </section>



        <!--视频，图片，音频-->
        <section id="resource" class="main">

            <!--显示-->
            <section id="intro-left">
                <header class="major">
                    <h2>影像</h2>
                    <div id="resource-title">
                        <p class="tab-title-unfocus">图片</p>
                        <p class="tab-title-unfocus">录音</p>
                        <p class="tab-title-unfocus">视频</p>
                    </div>
                </header>

                <div id="resource-container">
                    <span>
                        <ul>
                            <c:foreach  var="image" items="${relative.images}" varStatus="status">
                                <li>
                                    <a href="image.path">
                                        <img src="${image.path}">
                                    </a>                                   
                                </li>                            
                            </c:>
                        </ul>                
                    </span>

                    <span>
                        <ul>
                            <c:foreach  var="audio" items="${relative.audios}" varStatus="status">
                                <li>
                                    <a href="audio.path">
                                        ${audio.path}
                                    </a>                                   
                                </li>                            
                            </c:>
                        </ul>                
                    </span>

                    <span>
                        <ul>
                            <c:foreach  var="video" items="${relative.videos}" varStatus="status">
                                <li>
                                    <a href="video.path">
                                        ${video.path}                                    </a>                                   
                                </li>                            
                            </c:>
                        </ul>                
                    </span>
                    
                </div>               
                
            </section>



            <!--编辑-->
            <section>
                <form action="${controllerPath}upload" >
                    <input type="fileUpload" id="resource_upload" value="上传图片、录音、视频">
                    <input type="submit" value="提交" class="button special small">
                </form>
            </section>
        </section>












        <!-- 评价 -->
        <section id="comment" class="main">
            <div class="spotlight">
                <div class="content">
                    <header class="major">
                        <h2>留言</h2>
                    </header>
                    <dl class="alt">
                        <tbody>
                        <c:forEach var="comment" items="${relative.comments}" varStatus="status">
                           
                            <dt>${comment.name}:</dt>
                            <dd>${comment.description}</dd>
                                  
                        </c:forEach>
                    </tbody>
                    </dl>
                </div>
            </div>
        </section>

    </div>


</div>

<!--显示亲人信息时，如果亲人未去世，则隐藏去世信息和埋葬地点 -->
<script type="text/javascript">
    var div1=document.getElementById("intro_info_isalive");
    if(relative.alive==Relative.DEAD){
        div1.style.display="none";
    }else{
        div1.style.display="block";
    }
</script>

<!--编辑亲人信息模块：编辑、保存、取消3个方法-->
<script type="text/javascript">
    var div2=document.getElementById("div_intro_main");
    var div3=document.getElementById("div_intro_edit");
    function intro_edit(){
        div2.style.display="none";
        div3.style.display="block";
    }

    function intro_save(){
        div2.style.display="block";
        div3.style.display="none";
        //var form_1=document.getElementById("form_intro_edit");
        //form_1.submit();
        $("#form_intro_edit").submit();   
    }

    function intro_cancel(){
        div2.style.display="block";
        div3.style.display="none";  
        $("#form_intro_edit").cancel();           
    }
</script>

<!--编辑时间轴：包括显示编辑页面、保存、添加一个Item、取消4个方法-->
<script type="text/javascript">
    var div4=document.getElementById("cd-timeline");
    var div5=document.getElementById("div_event_edit");


    function event_edit(){
        div4.style.display="none";
        div5.style.display="block";
    }

    function add_event(){
       var extra_date=document,getElementById("date_extra");
       var extra_event=document.getElementById("event_extra");
       extra_date.style.display=="block";
       extra_event.style.display=="block";
    }

    function event_submit(){
        div5.style.display="none";
        div4.style.display="block";
        $("#form_event_edit").submit();
    }

    function event_cancel(){
        div4.style.display="block";
        div5.style.display="none";  
        $("#form_event_edit").cancel();          
    }
</script>

<!--编辑亲人列表：包括显示编辑页面、保存、添加一个Item3个方法-->
<script type="text/javascript">
    var div6=document.getElementById("relation_main");
    var div7=document.getElementById("div_relation_edit");


    function relation_edit(){
        div6.style.display="none";
        div7.style.display="block";
    }

    function add_relation(){
       var extra_relation=document,getElementById("rel_relation_extra");
       var extra_name=document.getElementById("rel_name_extra");
       extra_relation.style.display=="block";
       extra_name.style.display=="block";
    }

    function relation_submit(){
        div7.style.display="none";
        div6.style.display="block";
        $("#form_relation_edit").submit();
    }

    function relation_cancel(){
        div6.style.display="block";
        div7.style.display="none";  
        $("#form_relation_edit").cancel();          
    }
</script>


<!-- 资料页面，点击不同tab分别显示图片、录音、视频-->
<script type="text/javascript">
    var titles=document.getElementById('resource-title').getElementsByTagName('p'); 
    var contains=document.getElementById('resource-container').getElementsByTagName('span'); 
    var len=titles.length; 
    var flag=1;//修改默认值
    for(i=1;i<len;i++){
        titles[i].value = i;
        titles[i].onclick=function(){changeNav(this.value)}; 
        contains[i].className='tab-contain-undis'; 
    }
    titles[flag].className='tab-title-focus';
    contains[flag].className='tab-contain-dis';

    function changeNav(v){ 
        titles[flag].className='tab-title-unfocus';
        contains[flag].className='tab-contain-undis';
        flag=v; 
        titles[v].className='tab-title-focus';
        contains[v].className='tab-contain-dis';
    }
</script>








<!-- Scripts -->
<script src="../../../../assets/js/jquery.min.js"></script>
<script src="../../../../assets/js/jquery.scrollex.min.js"></script>
<script src="../../../../assets/js/jquery.scrolly.min.js"></script>
<script src="../../../../assets/js/skel.min.js"></script>
<script src="../../../../assets/js/util.js"></script>
<!--[if lte IE 8]>
<script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="../../../../assets/js/main.js"></script>

</body>
</html>